<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
</head>
<body>
<form class="layui-form" id="noticeForm" lay-filter="noticeForm">
    <div class="layui-fluid" style="padding-bottom: 75px;">
        <div class="layui-card">
            <div class="layui-card-header"></div>
            <div class="layui-card-body">
                <div class="layui-form-item uploadHeadImage">
                    <div class="layui-input-block">
                        <input type="hidden" name="wwztimg" id="wwztimg">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="many_wwztimg_upload_btn">多图片上传</button>
                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                预览图：
                                <div class="layui-upload-list uploader-list" style="overflow: auto;"
                                     id="uploader-list-wwztimg"></div>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript">
    var Feng = {
        ctxPath: "${ctxPath}",
        version: '${constants.getReleaseVersion()}'
    };
</script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript"
        src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
<script>
    //初始化页面
    $(function () {
        alert(1);
    });
    layui.use(['layer', 'form', 'admin', 'ax', 'upload', 'laydate'], function () {
        var $ = layui.jquery;
        var $ax = layui.ax;
        var form = layui.form;
        var admin = layui.admin;
        var layer = layui.layer;
        var upload = layui.upload;
        var laydate = layui.laydate;

        // 图片压缩
        function canvasDataURL(file, callback) { //压缩转化为base64
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                const img = new Image();
                const quality = 0.2; // 图像质量比例
                const canvas = document.createElement('canvas');
                const drawer = canvas.getContext('2d');
                img.src = this.result;
                img.onload = function () {
                    canvas.width = img.width;
                    canvas.height = img.height;
                    drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
                    convertBase64UrlToBlob(canvas.toDataURL(file.type, quality), callback);
                }
            }
        }

        function convertBase64UrlToBlob(urlData, callback) { //将base64转化为文件格式
            const arr = urlData.split(',');
            const mime = arr[0].match(/:(.*?);/)[1];
            const bstr = atob(arr[1]);
            let n = bstr.length;
            const u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            callback(new Blob([u8arr], {
                type: mime
            }));
        }

        //多图片上传
        var arr = [];
        upload.render({
            elem: '#many_wwztimg_upload_btn'
            , url: '/btyRbsc/upload' //改成您自己的上传接口
            , multiple: true
            , auto: false
            , async: false
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                // obj.preview(function(index, file, result){
                //     $('#uploader-list').append('<img style="width: 80px;height: 80px;" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                // });
            }
            // 图片压缩
            , choose: function (obj) { //选择文件后的回调
                var files = obj.pushFile();
                var filesArry = [];
                for (var key in files) { //将上传的文件转为数组形式
                    filesArry.push(files[key])
                }
                var index = filesArry.length - 1;
                var file = filesArry[index]; //获取最后选择的图片,即处理多选情况

                if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1]
                    .replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
                    return obj.upload(index, file)
                }
                canvasDataURL(file, function (blob) {
                    var aafile = new File([blob], file.name, {
                        type: file.type
                    })
                    var isLt1M;
                    if (file.size < aafile.size) {
                        isLt1M = file.size
                    } else {
                        isLt1M = aafile.size
                    }
                    if (isLt1M / 1024 / 1024 > 2) {
                        return layer.alert('上传图片过大！')
                    } else {
                        if (file.size < aafile.size) {
                            return obj.upload(index, file)
                        }
                        obj.upload(index, aafile)
                    }
                })
            }
            , done: function (res) {
                log(res);
                //获取到图片拼接展示

                //图片预览
                alert(12)
                //上传完毕
            }
        });
    });

    function log(res) {
        console.log(res);
    }
</script>
</body>
</html>